<template>
    <div class="overTime-dialog">
        <base-modal :show="show" @close="closeDialog" :title="'设置超时规则'" width="670px">
            <div class="body">
                <el-form label-width="100px">
                    <el-form-item label="超时类型:">
                        <el-radio-group v-model="form.timeOutType">
                            <el-radio label="duration">
                                <span>超过某个时长</span>
                                <i class="el-icon-info custom-icon"></i>
                            </el-radio>
                            <!-- <el-radio label="point">
                                <span>超过某个时间点</span>
                                <i class="el-icon-info custom-icon"></i>
                            </el-radio> -->
                        </el-radio-group>
                        <div v-if="form.timeOutType == 'duration'" class="kind-tips">当两个时间点的间隔时长超过某个值时，触发事件</div>
                        <div v-else class="kind-tips">当B时间超过A时间时，触发事件</div>
                    </el-form-item>
                    <div class="form-content">
                        <div class="form-content-left">
                            <div class="form-content-left-item">判断规则:</div>
                            <div class="form-content-left-item">当</div>
                            <div v-if="form.timeOutType == 'duration'" class="form-content-left-item">减去</div>
                            <div v-else class="form-content-left-item">超过</div>
                        </div>
                        <div class="form-content-right">
                            <div v-if="form.timeOutType == 'duration'" class="form-content-right-item">
                                <div class="item-title">截止时间</div>
                                <el-select class="item-kind" v-model="form.rule.endTimeConfig.tsType">
                                    <el-option v-for="item in timeKind" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-date-picker class="item-date" v-model="form.rule.endTimeConfig.value"
                                    type="datetime" v-if="form.rule.endTimeConfig.tsType == 'fixedTime'"
                                    value-format="timestamp">
                                </el-date-picker>
                                <el-select class="item-date" v-model="form.rule.endTimeConfig.value"
                                    v-else-if="form.rule.endTimeConfig.tsType == 'formTime'">
                                    <el-option v-for="item in formTimeKind" :key="item.enName" :label="item.cnName"
                                        :value="item.enName"></el-option>
                                </el-select>
                                <el-select class="item-date" v-model="form.rule.endTimeConfig.value"
                                    v-else-if="form.rule.endTimeConfig.tsType == 'dynamicTime'">
                                    <el-option label="当前时间(Now)" value="now"></el-option>
                                </el-select>
                            </div>
                            <div v-if="form.timeOutType == 'duration'" class="form-content-right-item">
                                <div class="item-title">起算时间</div>
                                <el-select class="item-kind" v-model="form.rule.startTimeConfig.tsType">
                                    <el-option v-for="item in timeKind" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-date-picker class="item-date" v-model="form.rule.startTimeConfig.value"
                                    type="datetime" v-if="form.rule.startTimeConfig.tsType == 'fixedTime'"
                                    value-format="timestamp">
                                </el-date-picker>
                                <el-select class="item-date" v-model="form.rule.startTimeConfig.value"
                                    v-else-if="form.rule.startTimeConfig.tsType == 'formTime'">
                                    <el-option v-for="item in formTimeKind" :key="item.enName" :label="item.cnName"
                                        :value="item.enName"></el-option>
                                </el-select>
                                <el-select class="item-date" v-model="form.rule.startTimeConfig.value"
                                    v-else-if="form.rule.startTimeConfig.tsType == 'dynamicTime'">
                                    <el-option label="当前时间(Now)" value="now"></el-option>
                                </el-select>
                            </div>
                            <div v-if="form.timeOutType == 'duration'" class="form-content-right-item">
                                <!-- <el-select class="item-title" v-model="form.rule.durationConfig.isOver">
                                    <el-option label="超过" value="1"></el-option>
                                    <el-option label="不超过" value="2"></el-option>
                                </el-select> -->
                                <div class="item-title">超过</div>
                                <el-select class="item-kind" v-model="form.rule.durationConfig.tsType">
                                    <el-option label="固定时长" value="fixedTime"></el-option>
                                    <!-- <el-option label="动态获取" value="dynamicTime"></el-option> -->
                                </el-select>
                                <el-input style="width: 120px; margin-right: 10px;"
                                    v-model="form.rule.durationConfig.value" @input="handleDurationConfigInput"></el-input>
                                <el-select style="width: 68px; margin-right: 10px;"
                                    v-model="form.rule.durationConfig.unit">
                                    <el-option label="分" value="m"></el-option>
                                    <el-option label="小时" value="h"></el-option>
                                    <el-option label="天" value="d"></el-option>
                                </el-select>
                                <div style="width: 50px">时触发</div>
                            </div>
                            <!-- <div v-if="form.timeOutType == 'point'" class="form-content-right-item">
                                <el-select class="item-kind" v-model="form.timingStartKind">
                                    <el-option v-for="item in timeKind" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-date-picker class="item-date"></el-date-picker>
                            </div>
                            <div v-if="form.timeOutType == 'point'" class="form-content-right-item">
                                <el-select class="item-kind" v-model="form.timingEndKind">
                                    <el-option v-for="item in timeKind" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <el-date-picker class="item-date"></el-date-picker>
                                <div>时触发</div>
                            </div> -->
                        </div>
                    </div>
                    <div class="footer-tips">
                        <i class="el-icon-warning"></i>
                        <div>超时触发器可正常运行的前提条件是，在实际业务中“截止时间需要晚于起算时间”，如果实际业务数据不满足该条件，则触发条件无效</div>
                    </div>
                </el-form>
            </div>
            <template v-slot:footer>
                <div class="footer">
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </template>
        </base-modal>
    </div>
</template>

<script>
import { getTimeoutReminderField } from '@src/api/ConnectorApi'
import moment from 'moment'
import { cloneDeep } from 'lodash'

export default {
    name: "overTimeDialog",
    props: {
        show: {
            type: Boolean,
            default: false
        },
        fromApiId: {
            type: String,
            default: ''
        },
        appData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    created() {
        this.updateForm();
    },
    data() {
        return {
            form: {
                timeOutType: 'duration',
                rule: {
                    endTimeConfig: {
                        tsType: "",
                        value: ""
                    },
                    startTimeConfig: {
                        tsType: "",
                        value: ""
                    },
                    durationConfig: {
                        // isOver: '1',
                        tsType: "",
                        value: "",
                        unit: "h"
                    }
                },
                // 超过某个时间点
                // timingStartKind: 'fixedTime', // 起算时间类型
                // timingEndKind: 'fixedTime', // 截止时间类型
            },
            timeKind: [
                // {
                //     label: '固定时间',
                //     value: 'fixedTime'
                // },
                {
                    label: '表单中的时间',
                    value: 'formTime'
                },
                // {
                //     label: '动态时间',
                //     value: 'dynamicTime'
                // },
            ],
            formTimeKind: [],
        }
    },
    watch: {
        'form.rule.endTimeConfig.tsType': {
            handler(val, oldVal) {
                if (val && oldVal) {
                    this.form.rule.endTimeConfig.value = '';
                }
            }
        },
        'form.rule.startTimeConfig.tsType': {
            handler(val, oldVal) {
                if (val && oldVal) {
                    this.form.rule.startTimeConfig.value = '';
                }
            }
        },
        'form.rule.durationConfig.tsType': {
            handler(val ,oldVal) {
                if (val && oldVal) {
                    this.form.rule.durationConfig.value = '';
                }
            }
        },
        show: {
            handler(val) {
                if (val) {
                    getTimeoutReminderField({
                        fromApiId: this.fromApiId,
                    }).then(res => {
                        this.formTimeKind = res?.data;
                    })
                    this.updateForm();
                }
            }
        }
    },
    methods: {
        closeDialog() {
            this.$emit('update:show', false);
        },
        handleDurationConfigInput(val) {
            this.form.rule.durationConfig.value = val.replace(/[^\d]/g, '');
        },
        save() {
            // 空值校验
            if (this.form.timeOutType == 'duration') {
                if (!this.form.rule.endTimeConfig.value) {
                    this.$message.error('请选择截止时间');
                    return;
                }
                if (!this.form.rule.startTimeConfig.value) {
                    this.$message.error('请选择起算时间');
                    return;
                }
                if (!this.form.rule.durationConfig.value) {
                    this.$message.error('请输入超时时长');
                    return;
                }
                // 当截止时间设置为固定时间，且时间不晚于今日的话，起算时间设置为当前时间时，规则不成立
                let now = new Date().getTime();
                if (this.form.rule.endTimeConfig.tsType == 'fixedTime' && this.form.rule.endTimeConfig.value >= now && this.form.rule.startTimeConfig.value == 'now') {
                    let date = moment(this.form.rule.endTimeConfig.value).format('YYYY-MM-DD HH:mm:ss');
                    this.$message.error(`截止时间：${date} 无法超过今日，该规则不成立，请重新设置`);
                    return;
                }
                // a和b都取表单时间时，不能同时设置为同一个字段
                if (this.form.rule.endTimeConfig.tsType == 'formTime' && this.form.rule.startTimeConfig.tsType == 'formTime' && this.form.rule.endTimeConfig.value == this.form.rule.startTimeConfig.value) {
                    this.$message.error('截止时间和起算时间不能同时取表单中的同一个时间字段');
                    return;
                }
            } else {
                // if (!this.form.rule.endTimeConfig.tsType) {
                //     this.$message.error('请选择截止时间');
                //     return;
                // }
                // if (!this.form.rule.startTimeConfig.value) {
                //     this.$message.error('请选择起算时间');
                //     return;
                // }
            }
            this.$emit('saveOverTimeDialog', this.form);
            this.$emit('update:show', false);
        },
        updateForm() {
            this.form.timeOutType = cloneDeep(this.appData.timeOutType) || 'duration';
            this.form.rule = Object.keys(cloneDeep(this.appData?.rule || {})).length !== 0 ? cloneDeep(this.appData.rule) : {
                endTimeConfig: {
                    tsType: "formTime",
                    value: ""
                },
                startTimeConfig: {
                    tsType: "formTime",
                    value: ""
                },
                durationConfig: {
                    // isOver: '1',
                    tsType: "fixedTime",
                    value: "",
                    unit: "h"
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.form-content {
    display: flex;

    .form-content-left {
        width: 106px;
        margin-right: 12px;

        &-item {
            height: 32px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }

    .form-content-right {
        padding: 32px 20px 32px 20px;
        margin-top: 14px;
        border-radius: 4px;
        background-color: #f0f0f0;
        width: 100%;

        &-item {
            height: 32px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
    }
}

.custom-icon {
    color: #c0c4cc !important;
}

.kind-tips {
    margin: 0 0 0 100px;
    color: #c0c4cc;
}

.footer-tips {
    margin: 10px 0 0 100px;
    display: flex;
    background-color: #fdf5e9;
    color: #e29835;
    border-radius: 4px;
    padding: 4px;

    i {
        margin: 2px 4px 0 4px;
    }
}

::v-deep .item-title {
    width: 80px !important;
    text-align: center;
    margin-right: 10px;
}

::v-deep .item-kind {
    width: 100px !important;
    margin-right: 10px;
}

::v-deep .item-date {
    width: 200px !important;
    margin-right: 10px;
}
</style>